<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation">新增</Button>
            <Table :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="row.status ==='1'" color="green" text="启用" />
                    <Badge v-if="row.status ==='0'" color="red" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt iuv-text-center">
                <Page :total="100" show-total />
            </div>
        </Card>
        <Modal v-model="modal" title="新增" @on-ok="handleSubmit" @on-cancel="handleDrawerCancel">
            <Form :model="formItem" :label-width="80">
                <FormItem label="名称" required>
                    <Input v-model="formItem.input" placeholder="请输入"></Input>
                </FormItem>
                <FormItem label="说明">
                    <Input v-model="formItem.explain" placeholder="请输入"></Input>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
                <FormItem label="权限">
                    <Checkbox
                        :indeterminate="indeterminate"
                        :value="checkAll"
                        @click.prevent.native="handleCheckAll"
                    >全选</Checkbox>
                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                        <Checkbox label="导医模块"></Checkbox>
                        <Checkbox label="患者模块"></Checkbox>
                        <Checkbox label="回访模块"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'diagnosis',
        data () {
            return {
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['导医模块', '患者模块'],
                modal: false,
                formItem: {
                    input: '',
                    explain: '',
                    switch: true
                },
                formItem1: {
                    interset: ''
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '说明',
                        key: 'explain'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        name: '医助',
                        explain: '拥有执行一切操作的权限',
                        status: '0'
                    },
                    {
                        name: '客服',
                        explain: '既有项目管理员的权限也有咨询主管的权限',
                        status: '1'
                    }
                ]
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
            },
            handleSubmit () {
                this.$Message.success('操作成功!');
            },
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkAllGroup = ['导医模块', '患者模块', '回访模块'];
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === 3) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>

<style scoped>
</style>
